<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ئارقا بەت باشقۇرۇش</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="index.css">

</head>

<body style="display: flex;flex-direction: row; direction: rtl;">
<div class="navbar" style="height: 100vh;">
    <ul>
        <li>
            <img src="img/20200507184355_By5mf.jpeg">
            <h1>باشقۇرغۇچى</h1>
        </li>
        <li>
            <div class="a">
                <i onclick="tallax('baxbat')" class="fa fa-home" aria-hidden="true">
                    <img style="width: 52px;height: 52px;" class="rasim" src="icon/bg-home.png">
                    <span>باشبەت</span>
                </i>
            </div>
        </li>
        <li>
            <div class="a">
                <i  onclick="tallax('tawar')" class="fa fa-sitemap" aria-hidden="true">
                    <img style="width: 52px;height: 52px;" class="rasim" src="icon/shangpinqingdan.png">
                    <span>تاۋار تىزىملىكى </span>
                </i>
            </div>
        </li>
        <li>
            <div class="a">
                <i  onclick="tallax('abont')" class="fa fa-user-circle-o" aria-hidden="true">
                    <img style="width: 52px;height: 52px;" class="rasim" src="icon/zhiyuanguanli.png">
                    <span>ئابونتلار تىزىملىكى</span>
                </i>
            </div>
        </li>
        <li>
            <div class="a">
                <i  onclick="tallax('zakaz')" class="fa fa-shopping-bag" aria-hidden="true">
                    <img style="width: 52px;height: 52px;" class="rasim" src="icon/dingdanbiao.png">
                    <span>زاكاز جەدۋىلى </span>
                </i>
            </div>
        </li>
        <li>
            <div class="a">
                <i onclick="tallax('ekitdar')" class="fa fa-th-large" aria-hidden="true">
                    <img style="width: 52px;height: 52px;" class="rasim" src="icon/gongnengcaidan.png">
                    <span>ئىقتىدار تىزىملىكى </span>
                </i>
            </div>
        </li>
    </ul>
    <div class="toggle" onclick="toggleMenu()"></div>
</div>

<div class="main">
    <div id="baxbat" class="main">
        باشبەت
    </div>
    <div id="tawar" class="main">
        تاۋار تىزىملىكى
    </div>
    <div id="abont" class="main">
        ئابونتلار تىزىملىكى
    </div>
    <div id="zakaz" class="main">
        زاكاز جەدۋىلى
    </div>
    <div id="ekitdar" class="main">
        ئىقتىدار تىزىملىكى
    </div>
</div>
</body>
<script>
    let baxbat = document.getElementById("baxbat");
    let tawar = document.getElementById("tawar");
    let abont = document.getElementById("abont");
    let zakaz = document.getElementById("zakaz");
    let ekitdar = document.getElementById("ekitdar");


    // let korunmayuz = document.getElementById("korunmayuz");
    // let tizimliklar = document.getElementById("tizimliklar");
    // let main = document.getElementById("main");
    // let tizimliklar_html = "";


    tallax("baxbat");

    function tallax(isim) {
        switch (isim) {
            case "baxbat":
                baxbat.style.display = "flex";
                tawar.style.display = "none";
                abont.style.display = "none";
                zakaz.style.display = "none";
                ekitdar.style.display = "none";
                break;
            case "tawar":
                baxbat.style.display = "none";
                tawar.style.display = "flex";
                abont.style.display = "none";
                zakaz.style.display = "none";
                ekitdar.style.display = "none";
                break;
            case "abont":
                baxbat.style.display = "none";
                tawar.style.display = "none";
                abont.style.display = "flex";
                zakaz.style.display = "none";
                ekitdar.style.display = "none";
                break;
            case "zakaz":
                baxbat.style.display = "none";
                tawar.style.display = "none";
                abont.style.display = "none";
                zakaz.style.display = "flex";
                ekitdar.style.display = "none";
                break;
            case "ekitdar":
                baxbat.style.display = "none";
                tawar.style.display = "none";
                abont.style.display = "none";
                zakaz.style.display = "none";
                ekitdar.style.display = "flex";
                break;
        }
    }
    function toggleMenu(){
        let navbar = document.querySelector('.navbar');
        let toggle = document.querySelector('.toggle');
        navbar.classList.toggle('active');
    }
    // function korunmayuzi(tizimliklar) {
    //     main.innerHTML = tizimliklar;
    //     tizimliklar_html += `<div onclick="korunmayuz(${baxbat},${tawar},${abont},${zakaz},${ekitdar})" class="main">${tizimliklar}</div>`;
    // }
</script>

</html>